<template>
  <div class="home">
    <div>
      <van-nav-bar title="AZC"  :z-index="4" />
    </div>
       <div class="footer_placeholder" id="cust_head" style="width:100%;height:3rem"></div>
    <div class="slider">
                <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(image, index) in images_swiper" :key="index">
                    <img :src="baseURL+image.img" style="width: 100%;" />
                </van-swipe-item>
                
                </van-swipe>
             </div>
    <div class="grid">
      <div>
        <div>
         
            <router-link :to="{name:'recharge',params:{price1: this.data.USDT[0],price2: this.data.USDT[1]}}"> <img src="../../assets/img/home_1.png" /></router-link>
        </div>
        <div>
          <router-link to="/recharge">充值</router-link>

        </div>
      </div>

      <div>
        <div>
           <router-link to="/withdraw"><img src="../../assets/img/home_2.png" /></router-link>
        </div>
        <div> <router-link to="/withdraw">提现</router-link></div>
      </div>
      <div>
        <div>
           <router-link to="/signIn"><img src="../../assets/img/home_3.png" /></router-link>
        </div>
        <div> <router-link to="/signIn">签到</router-link></div>
      </div>
      <div>
        <div>
           <router-link to="/treasureHunt"><img src="../../assets/img/home_4.png" /></router-link>
        </div>
        <div> <router-link to="/treasureHunt">道具商店</router-link></div>
      </div>
    </div>
    <div class="ad">
      <!-- <van-notice-bar text="公告：2020新年事业大会选址的通知！" left-icon="volume-o" /> -->
          <div class="textBox">
            <transition name="slide">
              
              <p class="text" :key="text.id" @click="link_node('gonggao',text.id)"><img src="../../assets/img/home_10.png" style="width:.8rem;    padding-right: .5rem;" />{{text.val}}</p>
            </transition>
          </div>
    </div>
    <div class="list">
      <p>全部资产</p>
      <div tab>
         <div>
          <div  @click="link_node(1)">
            <img src="../../assets/img/home_5.png" />
            <span>AZC</span>
          </div>
          <div>
            <div v-html="data.AZC[0].toFixed(2)"></div>
            <div v-html="'≈$'+data.AZC[1].toFixed(2)"></div>
          </div>
        </div>
        <div>
          <div @click="link_node(2)">
            <img src="../../assets/img/home_8.png" />
            <span>USDT</span>
          </div>
          <div>
             <div v-html="data.USDT[0].toFixed(2)"></div>
            <div v-html="'≈$'+data.USDT[1].toFixed(2)"></div>
          </div>
        </div>
        <div>
          <div>
            <img src="../../assets/img/home_6.png" />
            <span>ETH</span>
          </div>
          <div>
            <div>0.0000</div>
            <div>≈$0.00</div>
          </div>
        </div>
        <div>
          <div>
            <img src="../../assets/img/home_7.png" />
            <span>BTC</span>
          </div>
          <div>
            <div>0.0000</div>
            <div>≈$0.00</div>
          </div>
        </div>
       
        <div>
          <div>
            <img src="../../assets/img/home_9.png" />
            <span>TC</span>
          </div>
          <div>
            <div>0.0000</div>
            <div>≈$0.00</div>
          </div>
        </div>
      </div>
    </div>

    <v-footer :footer_on="0"></v-footer>
    <div style="height: 60px;"></div>
  </div>
</template>

<script>
import footer from "../footer/footer";
export default {
  data() {
    return {
       gonggao: [{'content':''}],
      number: 0,
      data:{'AZC':[0,0],'USDT':[0,0],'surplus':0},
      images_swiper:[],
    };
  },
  components: {
    "v-footer": footer
  },
  beforeCreate() {
   
  },
  mounted() { 
    let that=this;
    // if(!that.base.Log_Verify(that)){
    //  return  that.$router.push({ name: 'login'})
    // }
   //登录验证
    that.base.head_status(1)

     that.show();
     that.gonggao_meda()
    that.sliderImg()
    /*请求数据，操作dom , 放在这个里面  mounted*/
  },
  methods: {
    sliderImg(){
         let that=this;
     
         var data={token:JSON.parse(localStorage.userinfo).token,'type':2}
                       that._API.bannerinfo(data).then(res => {
                            if(res.code==200){
                                   that.images_swiper=res.data;
                                 
                            }else{
                               //that.$toast({ message: res.msg, position: "bottom" });
                            }
                      
                        }).catch(err => {
                            that.$toast({ message: "网络连接失败", position: "bottom" });
                        });
    },
    show(){
        let that=this;
      //type 1:小矿机，2中型矿机  3大矿机  4超级矿机 //ratio投资收益 cycle生命周期
         var data={token:JSON.parse(localStorage.userinfo).token}
                       that._API.getShouYe(data).then(res => {
                            if(res.code==200){
                                 that.data=res.data;
                                  sessionStorage.USDT_price1=that.data.USDT[0];
                                  sessionStorage.USDT_price2=that.data.USDT[1];
                                  sessionStorage.AZC_price1=that.data.AZC[0];
                                  sessionStorage.AZC_price2=that.data.AZC[1];
                            }
                       //     that.$toast({ message: res.msg, position: "bottom" });
                        }).catch(err => {
                            console.log("err", err);
                        });
   },
   gonggao_meda(){
      let that=this;
      
         var data={token:JSON.parse(localStorage.userinfo).token,id:7}
                       that._API.gonggao(data).then(res => {
                            if(res.code==200){
                                  that.gonggao=res.data

                                    that.startMove();

                            }

                        }).catch(err => {
                            console.log("err", err);
                        });
   },
   startMove (){

      
                                let timer = setTimeout(() => {
                                      if (this.number === this.gonggao.length-1) {
                                        this.number = 0;
                                      } else {
                                        this.number += 1;
                                       
                                      }
                                   
                                      this.startMove();
                                    }, 2000); // 滚动不需要停顿则将2000改成动画持续时间

   },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    next() {
      this.$router.push({ name: "setting_pwd" });
      return;
    },
    link_node(num,uid){
      console.log(num)
    
     
      if(num==1){
         this.$router.push({ name: "recharge_notes_AZC",params:{price1: this.data.AZC[0],price2: this.data.AZC[1]}});
      }else if(num==2){
        
         this.$router.push({ name: "recharge_notes_USDT",params:{price1: this.data.USDT[0],price2: this.data.USDT[1]} });
        
      }else if(num=='gonggao'){

        // <router-link :to="{name:'gradeRule',params:{id:3}}">
        this.$router.push({ name: "gradeRule",params:{id:'gonggao',uid:uid}});

      }
      
      return
    },
 
  },
    computed: {
    text () {
      return {
        id: this.number,
        val: this.gonggao[this.number].title,
      }
    }
  }
};
</script>


<style lang="scss" scoped >
    /deep/.van-hairline--bottom{    z-index: 4;position: fixed; width: 100%; background: #190147;   top: 0;}

    /deep/.van-nav-bar__title{color:white}
    // .slider>div{height: 10rem; justify-content: flex-end; display: flex;align-items: center;}
    
    // .slider>div>div{position: absolute;border-radius: 0.5rem;display: flex;width: 87%;align-items: center;    justify-content: center;}
    // .slider>div>div:nth-child(1){background-color: #17DFFC;z-index: 1;height: 4.5625rem;left: 10%;}
    // .slider>div>div:nth-child(2){background-color: #E517FC;z-index: 2;height: 6rem;left: 7%;}
    // .slider>div>div:nth-child(3){background-color: #8317FD;z-index: 3;height: 8.125rem;left: 4%;font-size: 1.25rem}
    //  .slider>div>div:nth-child(3)>p{left:1rem;top: .8rem;position: absolute;font-size: 0.8125rem}
    .grid{display: flex;}
    .grid>div{flex:1;text-align: center;border:0px solid red;margin: 1rem .3rem;padding: 1rem 0;border-bottom-left-radius: .5rem;border-top-right-radius: .5rem;border-bottom-right-radius: 1rem;border-top-left-radius: 1rem;font-size: 0.8rem;}
    .grid img{width: 2rem;height: 2rem;}
    .grid>div:nth-child(1){background-color: #3888FF;}
    .grid>div:nth-child(2){background-color: #A538FF;}
    .grid>div:nth-child(3){background-color: #FF9838;}
    .grid>div:nth-child(4){background-color: #5EC705;}

    .ad /deep/.van-notice-bar{background-color:initial}
    .ad /deep/.van-notice-bar__content,.ad .van-icon{color:white}

    .list>p{color:#00C6FF;padding-left: 1rem;}
    .list [tab]>div{display: flex;padding:.5rem 1rem;align-items: center;    box-shadow: inset 0 0 1rem 0px #7b00ff;    margin: 1rem .8rem;border-radius: .5rem;}
    .list [tab]>div>div:nth-child(1){flex:1;display: flex;align-items: center;}
    .list [tab]>div>div>span{padding-left: .5rem;}
    .list [tab]>div>div:nth-child(2){font-size: 0.75rem;    text-align: right;}
    .list [tab]>div>div>div:nth-child(1){font-size: .9375rem}
    a:visited ,a:link{color:white}

    
  .textBox { width: 100%; height: 40px; margin: 0 auto; overflow: hidden; position: relative; text-align: center;line-height: 36px;}
  .text { width: 100%; position: absolute; bottom: 0;  left: 1rem;text-align: left;font-size: 0.8rem}

  /deep/.van-swipe{border-radius: .5rem;margin: 0.7rem;}
</style>
